<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../favicon.ico" />
    <link rel="stylesheet" href="../support/style.css">
    <title>高德地图</title>
    <style>
        #container {
            width: 400px;
            height: 600px;
        }

        .info {
            width: 20rem;
        }

        button {
            padding: 5px;
        }

        input {
            height: 30px;
            width: 200px;
            font-size: 12px;
        }

        p.abs {
            right: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <p id='cityCode'></p>
    <div class="ret">
        <button onclick="toggleLayer()">切换</button>
        <button onclick="geoName()">查找</button>
        <input id="geoIn" type="text" placeholder="输入全球地名，每天次数有限">
        <p class="abs" id="lnglat">0<br>0</p>
    </div>
    <script type="text/javascript">
        var map, ggmap, ggwx = true, geocoder; //图块取图地址
        var gurl = 'https://mt{1,2,3,0}.google.cn/vt/lyrs=s@194&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil';
        var lnglat = document.getElementById('lnglat');
        //
        function initAMap() {
            map = new AMap.Map('container', {
                viewMode: '3D'
            });
            //异步同时加载多个插件，非 https不支持浏览器定位
            AMap.plugin(['AMap.Scale', 'AMap.ControlBar',
                'AMap.OverView', 'AMap.Geolocation'], addPlugin);
            //定位，谷歌卫星
            document.getElementById('cityCode').innerHTML = '城市编码：' + map.getAdcode();
            ggmap = new AMap.TileLayer({
                zIndex: 70,
                tileUrl: gurl
            });
            ggmap.setMap(map);
            //双击取经纬度
            map.on('click', showInfoClick);
        }
        function addPlugin() {
            var scale = new AMap.Scale({}),
                controlBar = new AMap.ControlBar({
                    showZoomBar: true,
                    showControlButton: true
                }),
                overView = new AMap.OverView({});
            map.addControl(scale);
            map.addControl(controlBar);
            map.addControl(overView);
        }
        function toggleLayer() {
            ggwx = !ggwx;
            ggmap.setMap(ggwx ? map : null);
        }
        function showInfoClick(e) {
            lnglat.innerHTML = 'lng: ' + e.lnglat.getLng() + '<br>lat: ' + e.lnglat.getLat();
        }
        //每日有查询次数限制
        function geoName() {
            var address = document.getElementById('geoIn').value;
            if (address == '') return;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        var geo = results[0].geometry;
                        var _pos = [geo.location.lng(), geo.location.lat()];
                        //谷歌给的方框两角 ↓
                        var ne = geo.viewport.getNorthEast();
                        var sw = geo.viewport.getSouthWest();
                        var Pne = [ne.lng(), ne.lat()];
                        var Psw = [sw.lng(), sw.lat()]; //高德必须根据覆盖物适应 ↓
                        var marker = new AMap.Marker({ position: Pne });
                        var markII = new AMap.Marker({ position: Psw });
                        map.setFitView([marker, markII]);
                    }
                }
            });
        }
        function ggAPIok() {
            geocoder = new google.maps.Geocoder();
            console.log('gg API, ok ★ !!')
        }
    </script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=&callback=initAMap"></script>
    <script src="http://maps.google.cn/maps/api/js?key=AIzaSyBV_MZG6os66kCG5VX62g-y3yc87VVMbCc&callback=ggAPIok">
    </script>
</body>

</html>